<template>
  <div class="sku">
    <el-card class="box-card">
      <!-- 表格部分 -->
      <el-table :data="skuDataList" border style="width:100%;margin:15px 0;">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="skuName" label="名称" width="180"></el-table-column>
        <el-table-column prop="skuDesc" label="描述" width="200"></el-table-column>
        <el-table-column label="默认图片" width="150">
          <template #="{row,$index}">
            <img :src="row.skuDefaultImg" alt="sku图片" style="width:80px;height:80px;">
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="质量" width="150"></el-table-column>
        <el-table-column prop="price" label="价格" width="150"></el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template #="{row,$index}">
            <el-button v-if="row.isSale == 0" @click="upLoad_btn(row)" type="success" size="small" icon="Top" title="上架"></el-button>
            <el-button v-if="row.isSale == 1" @click="upDown_btn(row)" type="warning" size="small" icon="Bottom" title="下架"></el-button>
            <el-button @click="edit_btn(row)" type="primary" size="small" icon="edit" title="编辑"></el-button>
            <el-button @click="info_btn(row)" type="info" size="small" icon="InfoFilled" title="查看详情"></el-button>
            <el-popconfirm :title="`确定要删除${row.skuName}吗?`" @confirm="delete_btn(row)">
              <template #reference>
                <el-button type="danger" size="small" icon="delete" title="删除"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器部分 -->
      <el-pagination :current-page="paginationInfo.pageNo" :page-size="paginationInfo.pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]" background layout="prev, pager, next, jumper, ->, sizes, total" :total="paginationInfo.total" @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
    </el-card>
    <!-- 抽屉弹出效果 -->
    <el-drawer v-model="drawer" title="查看商品详情">
      <el-row style="margin:10px 0;">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{skuDetail.skuName}}</el-col>
      </el-row>
      <el-row style="margin:10px 0;">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{skuDetail.skuDesc}}</el-col>
      </el-row>
      <el-row style="margin:10px 0;">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{skuDetail.price}}</el-col>
      </el-row>
      <el-row style="margin:10px 0;">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item,index in skuDetail.skuAttrValueList" :key="index" style="margin:5px;">{{item.attrName}}</el-tag>
        </el-col>
      </el-row>
      <el-row style="margin:10px 0;">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag v-for="item,index in skuDetail.skuSaleAttrValueList" :key="index" style="margin:5px;">{{item.saleAttrName}}</el-tag>
        </el-col>
      </el-row>
      <el-row style="margin:10px 0;">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel :interval="3000" height="150px">
            <el-carousel-item v-for="item,index in skuDetail.skuImageList" :key="index">
              <img :src="item.imgUrl" alt="商品图片" style="width:100%;height:100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ElCard, ElTable, ElTableColumn, ElPagination, ElMessage, ElButton, ElDrawer, ElRow, ElCol, ElTag, ElCarousel, ElCarouselItem, ElPopconfirm } from "element-plus";
import {Top, Bottom, InfoFilled } from '@element-plus/icons-vue';
//@ts-ignore,引入请求接口
import { reqAllSku, reqOnSale, reqCancelSale, reqSkuInfoList, reqDeleteSku } from "@/api/product/index.ts";
//@ts-ignore,引入类型约束
import { ResponseData } from "@/api/product/type.ts";
import { reactive, ref, onMounted } from "vue";

//表格部分数据
let skuDataList = ref([]);
//sku商品详情相关数据
let skuDetail = reactive({
  skuName:"",
  skuDesc:"",
  price:0,
  skuAttrValueList:[],
  skuSaleAttrValueList:[],
  skuImageList:[]
})
//商品sku详情的drawer弹出框
let drawer = ref(false);

//生命周期
onMounted(()=>{
  //发请求
  getSkuData();
})

//分页器相关数据
let paginationInfo = reactive<any>({
  pageNo:1,
  pageSize:10,
  total:0
})

//请求获取所有的sku数据
const getSkuData = async () => {
  let res = await reqAllSku(paginationInfo.pageNo,paginationInfo.pageSize);
  if(res.code == 200){
    skuDataList.value = res.data.records;
    paginationInfo.total = res.data.total;  //总页数
    ElMessage({type:"success",message:"数据请求成功!"});
    // console.log("sku数据请求api成功",res);
  }
}

//table表格中所有的btn按钮事件
const upLoad_btn = async (row:any) => {
  let res = await reqOnSale(row.id);
  if(res.code == 200){
    ElMessage({type:"success",message:`商品${row.skuName}上架成功!`});
    // console.log("商品上架api成功",res);
  }
  //重发请求，更新数据
  getSkuData();
}
const upDown_btn = async (row:any) => {
  let res = await reqCancelSale(row.id);
  if(res.code == 200){
    ElMessage({type:"success",message:`商品${row.skuName}下架成功!`});
    // console.log("商品上架api成功",res);
  }
  //重发请求，更新数据
  getSkuData();
}
const edit_btn = (row:any) => {
  ElMessage({type:"info",message:"功能完善中..."});
  console.log("功能开发中",row);
}
const info_btn = async (row:any) => {
  //获取sku详情接口
  let res:any = await reqSkuInfoList(row.id);
  if(res.code == 200){
    skuDetail.skuName = res.data.skuName;
    skuDetail.skuDesc = res.data.skuDesc;
    skuDetail.price = res.data.price;
    skuDetail.skuAttrValueList = res.data.skuAttrValueList;
    skuDetail.skuSaleAttrValueList = res.data.skuSaleAttrValueList;
    skuDetail.skuImageList = res.data.skuImageList;
    // console.log("sku详情api成功",res);
  }
  //打开sku详情抽屉
  drawer.value = true;
}
const delete_btn = async (row:any) => {
  let res:any = await reqDeleteSku(row.id);
  if(res.code == 200){
    ElMessage({type:"success",message:"sku删除成功!"});
    //重新发请求，更新数据
    getSkuData();
    // console.log('sku删除api成功',res);
  } else {
    ElMessage({type:"error",message:"sku删除失败!"});
  }
}

//分页器相关回调
const handleCurrentChange = (num:number) => {
  paginationInfo.pageNo = num;
  //重发请求
  getSkuData();
}
const handleSizeChange = (num:number) => {
  paginationInfo.pageSize = num;
  //重发请求
  getSkuData();
}

</script>
<script lang="ts">
export default {
  name:"Sku"
}
</script>

<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>